.exam-calendar {
    position: relative;
    .exam-calendar-input {
        min-width: 200px;
    }

    .exam-calendar-panel {
        z-index: 10;
        margin-top: 5px;
        position: absolute;
        left: 0;
        top: 100%;
        background-color: white;
        box-shadow: 1px 3px 3px #bbb;

        .exam-month-panel {
            background: $color-info-bg;
            font-size: 14px;
            text-align: center;
            line-height: 24px;
            color: white;
            padding: 8px 0;

            .next-month-btn, .prev-month-btn {
                width: 24px;
                height: 24px;
                &:hover {
                    background-color: $color-info-dker;
                }
            }
            .next-month-btn {
                float: right;

            }
            .prev-month-btn {
                float: left;
            }
            .next-month-btn, .prev-month-btn {
                svg {
                    width: 12px;
                    height: 12px;
                    fill: white;
                }
            }
        }
        .exam-days-panel {
            table {
                width: 100%;
                text-align: center;
                thead {
                    th {
                        padding: 0 13px;
                        &:first-child, &:last-child {
                            color: $color-info-dker;
                        }
                    }
                }
                tr {
                    line-height: 28px;
                    td {
                        cursor: pointer;
                        &:first-child, &:last-child {
                            color: $color-info-dker;
                        }
                        &:hover {
                            //background-color: #F5F5F5;
                            color: #FFF;
                            background-color: $color-info-lter;
                        }
                        &.selected {
                            //background-color: #F5F5F5;
                            color: #FFF;
                            background-color: $color-danger-bg;
                        }

                    }
                }
            }
        }

        .exam-hours-panel {
            text-align: center;
            margin: 10px 8px;
            font-size: 12px;
            > select {
                width: 56px;
                display: inline-block;
                margin-bottom: 0;
            }
        }
    }
}

.date-time-picker {
    position: relative;
    .calendar-input {
        min-width: 200px;
        position: relative;

        input {
            & + div[ng-messages] {
                position: absolute;
                left: 0;
                top: 100%;
            }

            &.ng-invalid.ng-dirty {
                margin-bottom: 15px;
            }
        }

    }

    .calendar-panel {
        z-index: 10;
        margin-top: 5px;
        position: absolute;
        left: 0;
        top: 100%;
        background-color: white;
        box-shadow: 1px 3px 3px #bbb;

        .month-panel {
            background: $color-info-bg;
            font-size: 14px;
            text-align: center;
            line-height: 24px;
            color: white;
            padding: 8px 0;

            .next-month-btn, .prev-month-btn {
                width: 24px;
                height: 24px;
                &:hover {
                    background-color: $color-info-dker;
                }
            }
            .next-month-btn {
                float: right;

            }
            .prev-month-btn {
                float: left;
            }
            .next-month-btn, .prev-month-btn {
                svg {
                    width: 12px;
                    height: 12px;
                    fill: white;
                }
            }
        }
        .days-panel {
            table {
                width: 100%;
                text-align: center;
                thead {
                    th {
                        padding: 0 13px;
                        &:first-child, &:last-child {
                            color: $color-info-dker;
                        }
                    }
                }
                tr {
                    line-height: 28px;
                    td {
                        cursor: pointer;
                        width: 28px;
                        text-align: center;
                        &:first-child, &:last-child {
                            color: $color-info-dker;
                        }
                        &:hover {
                            //background-color: #F5F5F5;
                            color: #FFF;
                            background-color: $color-info-lter;
                        }
                        &.selected {
                            //background-color: #F5F5F5;
                            color: #FFF;
                            background-color: $color-danger-bg;
                        }

                    }
                }
            }
        }

        .hours-panel {
            text-align: center;
            margin: 10px 8px;
            font-size: 12px;
            > select {
                width: 56px;
                display: inline-block;
                margin-bottom: 0;
                padding: 0;
            }
        }
    }
}